 <template>
  <div class="aboutus-wrapper">
    <div class="top-wrap">
      <p class="title-txt">
        <span class="title-01">{{info.title}}</span>
      </p>
    </div>

    <div class="main-wrap">
      <div class="title-box">
        <p class="title-01">正美集团 还美医疗整形</p>
        <p class="title-02">用实力和信誉铸就品牌</p>
        <p class="title-03 enUppercase">HM Medical Plastic Surgery</p>
      </div>

      <About :info="info"/>
      <baidu-map class="map" :center="{lng: 117.164652, lat: 39.129829}" :zoom="19">
        <bm-marker :position="{lng: 117.164652, lat: 39.129829}" :dragging="true" @click="infoWindowOpen">
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">天津市南开区怀安环路110号</bm-info-window>
        </bm-marker>
        </baidu-map>
    </div>
  </div>
</template>

 <script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
import About from "@/components/page";
import { BmMarker, bmInfoWindow } from 'vue-baidu-map'

export default {
  name: "page",
  data() {
    return {
      constant: constant,
      info: {},
      show: false
    };
  },
  components: {
    About
  },
  methods:{
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  },
  watch: {
    $route() {
      console.log("监听");
      let id = this.$route.query.id;

      http.get(this, {
        url: "article/detail",
        data: {
          id: id
        },
        dataType: "json",
        success: function(data) {
          console.log("page:", data);
          if (data.status == 1) {
            this.info = data.info;
          }
        }
      });
    }
  },
  created() {
    let id = this.$route.query.id;

    http.get(this, {
      url: "article/detail",
      data: {
        id: id
      },
      dataType: "json",
      success: function(data) {
        console.log("page:", data);
        if (data.status == 1) {
          this.info = data.info;
        }
      }
    });
  }
};
</script>

 <style scoped lang="scss">
 .map {
  width: 90%;
  height: 500px;
  margin:0 auto
}
.top-wrap {
  $letHeight: 1.14rem;
  border-top: 0.15rem solid $c-gray-dark;
  border-bottom: 0.15rem solid $c-gray-dark;

  .title-txt {
    height: $letHeight;
    line-height: $letHeight;
    text-align: center;
    background-color: $c-white-light;

    span {
      color: $c-mainC;
      display: inline-block;
      line-height: $letHeight;
      vertical-align: middle;

      &.title-01 {
        font-size: 0.38rem;
      }
    }
  }
}

.title-box {
  padding: 0.5rem 0 0.22rem 0;
  p {
    text-align: center;
  }
  .title-01 {
    font-size: 0.22rem;
    color: $c-mainC;
    line-height: 0.4rem;
  }

  .title-02 {
    font-size: 0.32rem;
    color: $c-themeC;
    line-height: 0.5rem;
  }

  .title-03 {
    font-size: 0.22rem;
    color: $c-gray-light;
    line-height: 0.4rem;
  }
}

.content-wrap {
  padding: 0 0.3rem;
  .about-img {
    margin-top: 0.33rem;
    width: 100%;

    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
